<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- Set render engine for 360 browser -->
    <meta name="renderer" content="webkit">

    <title>汽保王国商家后台管理系统</title>
    <link rel="stylesheet" href="../css/bootstrap.min.css">
    <style>
        [v-cloak] {
            display: none;
        }

        #main .inner {
            width: 800px;
            margin: 120px auto;
        }

        .inner p {
            margin: 10px 0;
            font-size:14px;
        }

        .inner p span {
            width: 120px;
            text-align: right;
            display: inline-block;
            margin-right: 10px;
            vertical-align: top;
        }
        .inner img{
            display: inline-block;
            width:375px;
        }
        .img-div{
            display: inline-block;
            position:relative;
        }
        .cancel{
            position:absolute;
            top:0;
            right:0;
            cursor: pointer;
            width:20px;
            height:20px;
            text-align:center;
            line-height:20px;
            border-radius: 50%;
            background: #ccc;
        }
        .form-horizontal{
            margin-top:40px;
        }
    </style>
    <!--[if lte IE 9]>
    <style type="text/css">
        input, textarea {
            color: #000;
        }

        .placeholder {
            color: #aaa;
        }

        .form-horizontal .control-label {
            padding-top: 0;
        }

    </style>
    <![endif]-->

    <script src="../js/jquery-1.12.4.min.js"></script>
    <script src="../js/bootstrap.min.js"></script>
    <script src="../js/plugins/layer/layer.js"></script>
    <script src="./js/common.js"></script>

    <script type="text/javascript">
        jQuery.ajaxSetup({
            headers: {
                'X-CSRF-TOKEN': jQuery('meta[name="csrf-token"]').attr('content')
            }
        });


        if (!$('#rIframe', parent.document.body).prop('id')) {
            window.paceOptions = {
                startOnPageLoad: false
            };
        }
    </script>
    <script src="./js/vue.js"></script>

</head>
<body>

<div class="container" id="main" v-cloak>
    <div class="row">
        <div class="col-sm-12">
            <div class="ibox float-e-margins">
                <div class="ibox-content">
                    <form   class="form-horizontal">

                        <div class="form-group">
                            <label class="col-sm-2 control-label">店名</label>
                            <div class="col-sm-3">
                                <input type="text" class="form-control" name="title" v-model="store.title" placeholder="请填写店铺名称" autocomplete="off">
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-2 control-label">店主</label>
                            <div class="col-sm-3">
                                <input type="text" class="form-control" name="username" v-model="store.username" placeholder="请填写店主" autocomplete="off">
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-2 control-label">店主联系方式</label>
                            <div class="col-sm-3">
                                <input type="text" class="form-control" name="phone" maxlength="11" v-model="store.phone" placeholder="请填写店主联系方式" autocomplete="off">
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-2 control-label">地址</label>
                            <div class="col-sm-3">
                                <input type="text" class="form-control" name="address" maxlength="11" v-model="store.address" placeholder="请填写地址" autocomplete="off">
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-2 control-label">店铺描述</label>
                            <div class="col-sm-3">
                                <textarea class="form-control" name="des" v-model="store.des" placeholder="请填写店铺描述"></textarea>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-2 control-label">店铺图片</label>
                            <div class="col-sm-10" id="shop_box">
                                <div  class="btn btn-primary" @click="uploadAvatar">选择图片</div>
                                <p style="color:#ccc;font-size:12px;margin-top:10px;">店铺图片用来展示小程序店铺主页，建议尺寸为750px*380px,效果更好</p>
                                <div class="img-div">
                                    <img :src="store.avatar" v-if="store.avatar">
                                    <span class="cancel" @click="store.avatar=''">×</span>
                                </div>
                            </div>
                            <input type="file" ref="avatar" id="avatar" style="opacity: 0;width:0;" accept="image/gif,image/jpeg,image/png"  @change="uploadavatar($event)">
                        </div>
                        <div class="form-group">
                            <label class="col-sm-2 control-label">营业执照</label>
                            <div class="col-sm-10" id="zhizhao_box" @click="uploadfile">
                                <div  class="btn btn-primary">上传营业执照</div>

                                <p style="color:#ccc;font-size:12px;margin-top:10px;">建议您上传营业执照，可以提供您的商家信誉，更好地获得展示</p>
                                <div class="img-div">
                                    <img :src="store.zhizhao" v-if="store.zhizhao">
                                    <span class="cancel" @click="store.zhizhao=''">×</span>
                                </div>

                            </div>
                            <input type="file" ref="zhizhao"  id="zhizhao" style="opacity: 0;width:0;" accept="image/gif,image/jpeg,image/png"  @change="uploadzhizhao($event)">
                        </div>
                        <div class="hr-line-dashed"></div>
                        <div class="form-group">
                            <div class="col-sm-4 col-sm-offset-2">
                                <button class="btn btn-primary" type="button" @click="saveStore">保存</button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>

    </div>

</div>
<script>
    var vm = new Vue({
        el: "#main",
        data: function () {
            return {
                store: '',
                files:"",
            }
        },
        mounted(){
            this.getDetail()
        },
        methods:{
            getDetail(){
                var that = this;
                $.ajax({
                    url:base_url+'/api/getShopsDetail',
                    data:{
                        api_token:localStorage.api_token,
                        type:1,
                        p:'w'
                    },
                    type:'get',
                    success:function(res){
                        console.log(res);
                        if(res.status==1){
                            that.store = res.data;
                        }
                    },
                    error:function(error){
                        console.log(error)
                    }
                })
            },
            uploadAvatar(){
                this.$refs.avatar.click();
            },
            uploadfile(){
                this.$refs.zhizhao.click();
            },
            uploadavatar(event){
                var that = this;
                var files = event.target.files[0];
                var formdata = new FormData();
                formdata.append('p','w');
                formdata.append('file',files);
                $.ajax({
                    url:base_url+'/api/uploads',
                    data:formdata,
                    type:"post",
                    processData : false,
                    // 告诉jQuery不要去设置Content-Type请求头, jquery 会自动设置为multipart/form-data
                    contentType : false,
                    success:function(res){
                        if(res.status==1){
                            that.store.avatar = res.data;
                            $('#avatar').val('')
                        }else{
                            layer.msg(res.msg)
                        }
                    }
                })
            },
            uploadzhizhao(event){
                var that = this;
                var files = event.target.files[0];

                var formdata = new FormData();
                formdata.append('p','w');
                formdata.append('file',files);
                $.ajax({
                    url:base_url+'/api/uploads',
                    data:formdata,
                    type:"post",
                    processData : false,
                    // 告诉jQuery不要去设置Content-Type请求头, jquery 会自动设置为multipart/form-data
                    contentType : false,
                    success:function(res){
                        if(res.status==1){
                            that.store.zhizhao = res.data;
                            $('#zhizhao').val('')
                        }else{
                            layer.msg(res.msg)
                        }
                    }
                })
            },
            saveStore(){
                var that= this;
                if(this.store.title==''){
                    return layer.msg('请填写店铺姓名')
                }
                if(this.store.avatar==''){
                    return layer.msg('请上传店招');
                }
                if(this.store.username==''){
                    return layer.msg('请填写店主')
                }
                if(this.store.phone==''){
                    return layer.msg('请填写手机号')
                }
                if(/^1\\d{10}$/.test(this.store.phone)){
                    return layer.msg('请填写正确的手机号')
                }
                if(this.store.des==''){
                    return layer.msg('请填写店铺描述')
                }
                if(this.store.address==''){
                    return layer.msg('请填写店铺地址')
                }
                $.ajax({
                    url:base_url+"/api/shop_edit",
                    data:{
                        title:that.store.title,
                        username:that.store.username,
                        des:that.store.des,
                        zhizhao:that.store.zhizhao,
                        avatar:that.store.avatar,
                        phone:that.store.phone,
                        address:that.store.address,
                        api_token:localStorage.api_token,
                        p:'w'
                    },
                    type:'post',
                    success:function(res){
                       console.log(res)
                    }
                })
            }
        }
    })
</script>
</body>
</html>


